<template>
  <div class="header">
    <div class="header__left">
      <slot name="back-btn">
        <el-icon v-if="backBtn" @click="backHandler">
          <Back/>
        </el-icon>
      </slot>
    </div>

    <div class="header__middle">
      <div class="header__top">
        <div class="header__title" v-if="title">{{ title }}</div>
        <div class="header__subtitle" v-if="subtitle">{{ subtitle }}</div>
        <slot name="title-extra"></slot>
      </div>
      <div class="header__bottom">
        <div class="header__desc" v-if="desc">{{ desc }}</div>
        <slot name="desc-extra"></slot>
      </div>
    </div>

    <div class="header__right">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import {defineComponent} from 'vue';

export default defineComponent({
  name: 'AppHeader',
  emits: ['back'],
  props: {
    backBtn: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
    },
    subtitle: {
      type: String,
    },
    desc: {
      type: String,
    },
  },
  methods: {
    backHandler() {
      if (this.$router) {
        this.$router.go(-1);
      } else {
        this.$emit('back');
      }
    },
  },
});
</script>

<style scoped>
.header {
  @apply bg-white text-base w-full py-4 px-6 flex relative;

  .header__left {
    .el-icon {
      @apply h-9 w-9 mr-2 rounded-full cursor-pointer;
      @apply flex justify-center items-center;
      @apply bg-[#7676801E] hover:bg-[#78788033];
      @apply font-semibold text-lg;
    }
  }

  .header__middle {
    @apply flex flex-col gap-y-2;

    .header__top {
      @apply h-9 flex gap-x-2 items-center;

      .header__title {
        @apply font-semibold text-xl text-[#17233DFF];
      }

      .header__subtitle {
        @apply mt-1;
      }
    }

    .header__bottom {
      @apply flex;
    }
  }

  .header__right {
    @apply flex-1;
  }
}
</style>